<template>
	<view class="template-detail" v-if="detail">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">模板详情</text>
		</view>

		<!-- 基本信息区域 -->
		<view class="section-card">
			<view class="section-title">基本信息</view>
			<view class="info-grid">
				<view class="info-cell">
					<text class="cell-label">模板名称</text>
					<text class="cell-value">{{ detail.typeName }}</text>
				</view>
				<view class="info-cell">
					<text class="cell-label">流程ID</text>
					<text class="cell-value">{{ detail.processDefinitionId }}</text>
				</view>
				<view class="info-cell">
					<text class="cell-label">流程Key</text>
					<text class="cell-value">{{ detail.processKey }}</text>
				</view>
			</view>
		</view>

		<!-- 描述 -->
		<view class="section-card">
			<view class="section-title">描述信息</view>
			<view class="description">{{ detail.description }}</view>
		</view>

		<!-- 流程图 -->
		<view class="section-card" v-if="orderDiagram">
			<view class="section-title">流程图</view>
			<image :src="orderDiagram" mode="widthFix" class="diagram-image" />
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				detail: null,
				orderDiagram: null
			};
		},
		onLoad(option) {
			this.fetchOrderDiagram(option.typeId),
				this.getDetail(option.typeId)

		},
		methods: {
			async getDetail(typeId) {
				try {
					const token = uni.getStorageSync('token');

					const res = await uni.request({
						url: `http://localhost:8082/admin/processes/${typeId}`,
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'get'
					});

					if (res.statusCode === 200) {
						console.log(res.data);
						this.detail = res.data.data;
					} else {
						uni.showToast({
							title: '获取模板详情失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败' + err.message,
						icon: 'none'
					});
				}
			},

			async fetchOrderDiagram(typeId) {
				try {
					const token = uni.getStorageSync('token');

					const res = await uni.request({
						url: `http://localhost:8082/api/common/typeDiagram?orderTypeId=${typeId}`,
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'get'
					});
					if (res.statusCode === 200) {

						this.orderDiagram = 'data:image/png;base64,' + res.data.data;
					} else {
						uni.showToast({
							title: '获取流程图失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			}

		}
	};
</script>

<style scoped>
	.template-detail {
		padding: 20rpx;
		background-color: #f0f4f8;
	}

	.header {
		background: linear-gradient(to right, #3b82f6, #2563eb);
		color: white;
		padding: 20rpx;
		text-align: center;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.section-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 24rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #1e3a8a;
		margin-bottom: 16rpx;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16rpx 12rpx;
	}

	.info-cell {
		display: flex;
		flex-direction: column;
	}

	.cell-label {
		font-size: 28rpx;
		color: #64748b;
	}

	.cell-value {
		font-size: 32rpx;
		font-weight: 500;
		color: #0f172a;
		margin-top: 6rpx;
	}

	.description {
		color: #0f172a;
		line-height: 1.6;
		font-size: 30rpx;
	}

	.diagram-image {
		width: 100%;
		max-height: 400rpx;
		object-fit: contain;
		border-radius: 12rpx;
	}
</style>